<template>
	<div class="footer tCenter" id="footer">
		<div class="columns f16" v-if="isHome">
			<div class="columns-box">
				<div class="columns-top">
					<div v-for="(item, index) in columnList" :key="index" class="columns-top-box">
						<div class="columns-top-title">
							<div class="columns-title" @click="onColumn(item)">{{ item.name }}</div>
							<div v-for="it in item.children" :key="it.id" class="columns-text" @click="onFL(it, item)">
								{{ it.name }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mb10">为了获得最佳操作体验，建议您使用Chrome浏览器或Microsoft Edge浏览器，支持1024*768分辨率</div>
		<div>© 2023 华创数字云 服务热线：0536-8184803</div>
	</div>
</template>

<script setup>
import { onMounted } from "vue"
const props = defineProps({
	isHome: {
		type: Boolean,
		default: false,
	},
})

const columnList = ref([])

async function getData() {
	const result = await getAxios("/knowledge/kbSubjectWarehouse/findByListToCategoryAdd")
	if (result) {
		columnList.value = result.slice(0, 5)
	}
}
getData()

onMounted(() => {
	let timer = null
	const footer = document.getElementById("footer")

	// 页面高度发生变化时 重新计算
	var observer = new MutationObserver(function (mutations, observer) {
		clearTimeout(timer)
		timer = setTimeout(() => {
			if (footer.offsetTop + footer.offsetHeight <= window.innerHeight) {
				footer.style.position = "fixed"
				footer.style.bottom = 0
				footer.style.left = 0
				footer.style.right = 0
				footer.style.zIndex = 999
			} else {
				footer.style.position = "relative"
				footer.style.zIndex = 0
			}
		}, 160)
	})

	observer.observe(document.getElementById("app"), {
		childList: true,
		attributeOldValue: false,
		characterDataOldValue: false,
		subtree: true,
	})
})
</script>
<style lang="scss" scoped>
.footer {
	// position: relative;
	width: 100%;
	padding: 33px 0 30px;
	background: #121721;
	color: rgba(255, 255, 255, 0.7);
	// z-index: 100;
}

.columns {
	width: 100%;
	background-color: #121721;
	display: flex;
	justify-content: center;
	.columns-box {
		width: 1000px;
		.columns-top {
			// height: 400px;
			border-bottom: 1px solid #666;
			margin-bottom: 20px;
			padding: 40px 0 0 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.columns-top-box {
				width: 20%;
				margin-bottom: 5px;
				.columns-top-title {
					cursor: pointer;
					color: #999;
					.columns-title {
						font-size: 16px;
						margin-bottom: 5px;
						font-weight: 700;
						&:hover {
							color: #fff;
						}
					}
					.columns-text {
						font-size: 14px;
						margin-bottom: 5px;
						&:hover {
							color: #fff;
						}
					}
					// &:hover {
					// 	color: #fff;
					// }
				}
			}
		}
		.columns-bottom {
			display: flex;
			flex-wrap: wrap;
			.columns-bottom-box {
				cursor: pointer;
				margin-right: 20px;
				color: #999;
				&:hover {
					color: #fff;
				}
			}
		}
	}
}
</style>
